<template>
	<view class="container">
		<view class=" bgcfff">
			<uni-easyinput class="uni-mt-5" trim="all" v-model="title" placeholder="标题"></uni-easyinput>
		</view>
		<view class="mgt-20 bgcfff textarea">
			<uni-easyinput maxlength="200" type="textarea" v-model="message" placeholder="说明"></uni-easyinput>
		</view>
		<view class="item flex space-between mgt-20">
			<view class=""> 开始日期</view>
			<uni-datetime-picker v-model="startDate">{{startDate}}</uni-datetime-picker>
		</view>
		<view class="item flex space-between">
			<view class=""> 结束日期 </view>
			<uni-datetime-picker v-model="endDate">{{endDate}}</uni-datetime-picker>
		</view>
		<view class="item mgt-20" v-if="type!=3 &&type!=1">
			<view class=" flex space-between">
				<view class=""> 时间区间 </view>
				<switch color="#1e90ff" :checked="isBetweenDate" style="transform:scale(0.7)" @change="switch1Change" />
			</view>

			<view class="flex betweentime" v-for="item in timecount" :key="item" v-if="isBetweenDate">
				<view class="left" @click="reduceBetweenTime">
					<view class="box">
						<image src="/static/images/index/reduce-icon.png" mode=""></image>
					</view>
				</view>
				<view class="right">
					<view class="flex space-between">
						<view class="">
							签到{{item+1}}开始时间
						</view>
						<view @click="startTime(item)">
							<picker mode="time" :value="starttime[item]" start="00:00" end="23:59"
								@change="startTimeChange">
								<view class="uni-input ">{{starttime[item]}}</view>
							</picker>
						</view>
					</view>
					<view class="flex space-between">
						<view class="">
							签到{{item+1}}结束时间
						</view>
						<view class="" @click="endTime(item)">
							<picker mode="time" :value="endtime[item]" start="00:00" end="23:59"
								@change="endTimeChange">
								<view class="uni-input">{{endtime[item]}}</view>
							</picker>
						</view>

					</view>
				</view>
			</view>
			<view class="flex betweentime" @click="addBetweenTime" v-if="isBetweenDate">
				<view class="left">
					<view class="box">
						<image src="/static/images/index/add-icon.png" mode=""></image>
					</view>
				</view>
				<view class="right">添加签到时段 </view>
			</view>

		</view>
		<view class="item flex space-between mgt-20">
			<view class="flex"> <text class="mgr-2">公众号打开</text>
				<uni-icons type="help" size="20" color="#1e90ff" @click="gohelp"></uni-icons>
			</view>
			<switch color="#1e90ff" :checked="isofficialNum" style="transform:scale(0.7)" @change="switch2Change" />
		</view>
		<view class="item mgt-20" v-if="type!=2">
			<view class=" flex space-between">
				<view class=""> 签到口令 </view>
				<switch :checked="isword" color="#1e90ff" style="transform:scale(0.7)" @change="switch3Change" />
			</view>
			<view class="bordertop" v-if="isword" @click="copyclick">
				{{wordtoken}}
			</view>

		</view>
		<view class="item mgt-20">
			<view class=" flex space-between">
				<view> 指定签到地点</view>

				<switch :checked="isaddress" color="#1e90ff" style="transform:scale(0.7)" @change="switch4Change" />
			</view>
			<view class="color999" v-if="isaddress" @click="map">
				<block v-if="addressInfo==''">
					<uni-icons type="location-filled" size="15" color="#999"></uni-icons> 设置签到地点
				</block>
				<block v-else>{{addressInfo}}</block>
				<!-- <uni-icons type="location-filled" size="15" color="#999"></uni-icons> 设置签到地点 -->
			</view>
			<view class="flex space-between" v-if="isaddress">
				<text>签到范围(必须≥50米)</text>
				<view class="flex">
					<uni-number-box class="uni-number-box-size" :value="addressrange" :min="50" :max="1000"
						:step="50" /><!-- <text> 米</text> -->
				</view>
			</view>
		</view>
		<view class="item mgt-20">
			<view class="flex space-between">
				<view class=""> 签到需填写信息 </view>
				<switch color="#1e90ff" :checked="isform" style="transform:scale(0.7)" @change="switch5Change" />
			</view>
			<view class="bordertop button-box" v-if="isform">
				<view class="button-info"
					:class="{'button-must':item.is_check && item.is_required == 1,'button-optional':item.is_check && item.is_required == 0}"
					v-for="(item,index) in btnText" :key="index" @click="btnClick(index,item)"> {{item.title}}
					<view class="cover">
						<image v-if="item.is_check && item.is_required == 1" src="/static/images/index/jiaobiaored2.png"
							mode="widthFix"></image>
						<image v-if="item.is_check && item.is_required == 0"
							src="/static/images/index/jiaobiaoblue2.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="button-add" @click="addbtn"> 添加+ </view>
			</view>

		</view>
		<view class="bottom-box">
			<view class="bottom-btn" @click="createData" v-if="isedit">
				修改
			</view>

			<block v-else>
				<view class="bottom-btn" @click="createData" v-if="lsNumber">
					创建
				</view>
				<view class="bottom-btn" v-else>
					创建
				</view>
			</block>
		</view>

		<!-- 浮动盒子 -->
		<view class="btn-float-box" v-if="isbtnClick">
			<view class="item" @click="isMust"> 设为必填项 </view>
			<view class="item bordertop" @click="isNotMust"> 设为选填项 </view>
			<block v-if="btnStylels > 2">
				<view class="item bordertop" @click="editSignIn"> 编辑签到项 </view>
				<view class="item bordertop" @click="copySignIn"> 复制签到项</view>
			</block>
			<view class="item mgt-4" @click="isbtnClick = false"> 取消 </view>
		</view>

		<view class="mask" @click="isbtnClick=false" v-if="isbtnClick"> </view>
		<!-- 
		<uni-popup ref="biaoti" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
					class="text">请输入标题</text></view>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		signEdit,
		signInfo,
		signList
	} from '@/api/activity.js';
	export default {
		data() {
			return {
				lsNumber: true,
				title: "", //用于显示标题
				message: "", //用于显示说明的内容
				startDate: "", //开始日期
				endDate: "", //结束日期
				starttime: ['00:00', '00:00'], //开始时间区间块 的存储
				endtime: ['23:59', '23:59'], //结束时间区间块 的存储
				timecount: 2, //时间区间块的数量
				starttimeVal: "", //开始时间的临时存储值
				endtimeVal: "", //结束时间的临时存储值
				sign_time: [], //用于传递给后台的最后的json数据

				isofficialNum: false, //是否点击了   `公众号打开`  的按钮
				isword: false, //是否点击了   `签到口令`  的按钮
				wordtoken: 0, //口令值
				isaddress: false, //是否点击了   `签到地点`  的按钮
				addressInfo: "", //签到地址的详细信息
				addressrange: 500,
				location_longitude: "", //经度
				location_latitude: "", //纬度
				isform: false, //是否点击了   `签到须填写信息`  的按钮

				isBetweenDate: false, //是否点击了   ` 时间区块`  的按钮 
				isbtnClick: false, //是否点击了   ` 选项的小按钮`  的按钮 
				btnStyleYes: [], //是否点击了   ` 必填按钮`  的按钮 
				btnStyleNo: [], //是否点击了   ` 选填按钮`  的按钮 
				btnStylels: 3, // `按钮  `的临时存储值

				jingdu: "",
				weidu: "",

				btnText: [{
					title: "姓名",
					form_data_type: 1,
					options: [],
					is_required: 1,
					is_check: true,
				}, {
					title: "手机号",
					form_data_type: 10,
					options: [],
					is_required: 0,
					is_check: false,
				}, {
					title: "自动定位",
					form_data_type: 4,
					options: [],
					is_required: 0, //如果已选中，利用这个判断是必填（红色）还是选填（蓝色）
					is_check: false, //判断是否选中
				}], //按钮的数量和信息
				from_data: [], //选中的
				btnCount: 0, // 增加按钮的数量
				type: 0, //	 判断创建时候的 创建类型  (1单次签到、2长期签到、3自由签到、4考勤签到)   'copy 为复制签到'
				isedit: false,
				betweentiemstandard: false,
				code: ""
			}
		},
		onLoad(options) {
			console.log(options, 'optionsoptionsoptionsoptions');
			// this.code = options.code
			// this.type = options.type
			this.isedit = options.edit
			this.wordtoken = Math.trunc(Math.random() * (999999 - 100000) + 100000)
			this.type = options.type
			console.log(options.code, 'options.code');
			this.code = options.code
			this.loadinit()
			console.log(this.type);
			if (options.type == 'copy') {
				// 编辑
				this.copyInit()
				console.log(this.type);
			} else {
				// 创建
				this.init()
			}
			let datamap = new Date().getTime();
			// console.log('时间戳', datamap)
			// this.startDate = this.timestampToTime(datamap);
			// this.endDate = this.timestampToTime(datamap + 86400000);
			function timestampToTime(datamap) {
				var date = new Date(datamap); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				return Y + M + D;
			}
			timestampToTime(datamap);
			console.log(timestampToTime(datamap)); //2020-06-18 10:33:24
			this.startDate = timestampToTime(datamap) + "00:00:00";
			this.endDate = timestampToTime(datamap + 2592000000) + "23:59:59";
		},

		onReady() {
			this.init()
		},
		methods: {
			copyclick(){
				// let that =this
				// console.log(this.wordtoken,'this.wordtoken');
				// uni.setClipboardData({
				// 	data:that.wordtoken,
				// 	success: function () {
				// 		console.log('口令复制成功！');
				// 	}
				// });
			},
			loadinit() {
				let that = this
				signList({
					data: {
						seach_type: 1
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data, '列表数据')
						console.log(res.data.list[0].code, 'res.data[0].code');
						that.code = res.data.list[0].code
					}
				})
			},
			init() {
				let that = this;
				that.btnText = that.btnText.concat(uni.getStorageSync('BtnTextKey'));
				var newArr = [];
				var arrId = [];
				for (var item of that.btnText) {
					if (arrId.indexOf(item['title']) == -1) {
						if (item['title'] != undefined) {
							arrId.push(item['title']);
							newArr.push(item);
						}

					}
				}
				console.log(arrId, newArr);
				console.log('我看彳亍');
				this.btnText = newArr
			},
			copyInit() {
				if (this.isedit) {
					uni.setNavigationBarTitle({
						title: '修改签到'
					});
				} else {
					uni.setNavigationBarTitle({
						title: '复制签到'
					});
				}
				signInfo({
					data: {
						code: this.code
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data, 'this.typethis.typethis.type')
						if (res.data.info.location_status == 1) {
							this.isaddress = true
							this.addressInfo = res.data.info.location_address
							this.addressrange = res.data.info.location_min_distance
							// this.addressrange=res.data.info.location_min_distance
						}
						this.wordtoken = res.data.info.token
						if (res.data.info.token_status == 1) {
							this.isword = true
						}
						if (res.data.info.wechat_status == 1) {
							this.isofficialNum = true
							this.$forceUpdate()
						} //签到时间区块
						if (res.data.info.sign_time_status == 1) {
							this.isBetweenDate = true
							this.starttime = []
							this.endtime = []
							this.timecount = 0
							console.log(res.data.sign_time, 'res.data.sign_time');
							let sign_time = res.data.sign_time;
							for (var key in sign_time) {
								this.starttime.push(sign_time[key][0])
								this.endtime.push(sign_time[key][1])
								this.timecount++
							}
						} //签到需要填写信息区块
						if (res.data.info.from_data_status == 1) {
							this.isform = true
							this.btnText = []
							let formdata_data = res.data.from_data
							console.log('formdata_dataformdata_dataformdata_data', formdata_data)
							for (var key in formdata_data) {
								this.btnText.push(formdata_data[key])
							}

						}
						console.log(this.type, '41515151515151');
						if (this.type == "copy") {
							this.type = res.data.info.type
							console.log(this.type, '41515151515151');
						}
						// isofficialNum=true
						this.startDate = res.data.info.start_at
						this.endDate = res.data.info.end_at
						this.title = res.data.info.name
						this.message = res.data.info.content
						this.$forceUpdate()
					}
				})

			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			},
			switch1Change() {
				this.isBetweenDate = !this.isBetweenDate
			},
			switch2Change() {
				this.isofficialNum = !this.isofficialNum

			},
			switch3Change() {
				this.isword = !this.isword

			},
			switch4Change() {
				this.isaddress = !this.isaddress

			},
			switch5Change() {
				this.isform = !this.isform

			},
			startTime(val) {
				this.starttimeVal = val
			},
			startTimeChange(e) {
				this.$set(this.starttime, this.starttimeVal, e.detail.value)
			},
			endTime(val) {
				this.endtimeVal = val
			},
			endTimeChange(e) {
				this.$set(this.endtime, this.endtimeVal, e.detail.value)
			},
			addBetweenTime() {
				this.timecount++
				this.starttime.push('00:00')
				this.endtime.push('23:59')

			},
			reduceBetweenTime() {
				this.timecount--
				this.starttime.pop()
				this.endtime.pop()
			},
			gohelp() {
				uni.navigateTo({
					url: "../me/help"
				})
			},
			btnClick(val, item) {
				if (item.is_check) {
					this.btnText[val].is_check = false;
					return;
				} else {
					this.isbtnClick = true;
					this.btnStylels = val;
				}
				console.log(this.btnStylels);
			},
			rubbish() {
				this.from_data = []
				for (var i = 0; i < this.btnText.length; i++) {
					if (this.btnText[i].is_check == true) {
						this.from_data.push(this.btnText[i])
					}
				}
			},
			isMust() {
				console.log('6666666');
				this.btnText[this.btnStylels].is_check = true;
				this.btnText[this.btnStylels].is_required = 1;
				this.isbtnClick = false;
				console.log('this.btnText', this.btnText);
				this.from_data = []
				for (var i = 0; i < this.btnText.length; i++) {
					if (this.btnText[i].is_check == true) {
						this.from_data.push(this.btnText[i])
					}
				}
			},
			editSignIn() {
				uni.navigateTo({
					url: `add-field?title=${this.btnText[this.btnStylels].title.trim()}&index=${this.btnStylels}`,
					success: () => {
						this.btnText.splice(this.btnStylels, 1)
						this.isbtnClick = false
					}
				})

			},
			copySignIn() {
				uni.navigateTo({
					url: `add-field?title=${this.btnText[this.btnStylels].title}&index=${this.btnStylels}`,
					success: () => {
						this.isbtnClick = false
					}
				})
			},
			isNotMust() {
				this.btnText[this.btnStylels].is_check = true;
				this.btnText[this.btnStylels].is_required = 0;
				this.isbtnClick = false;
				console.log('this.btnText', this.benText);
				this.from_data = []
				for (var i = 0; i < this.btnText.length; i++) {
					if (this.btnText[i].is_check == true) {
						this.from_data.push(this.btnText[i])
					}
				}
				console.log('isNotMust	this.from_data', this.from_data);
			},
			map() {
				uni.chooseLocation({
					success: res => {
						this.addressInfo = res.address + res.name
						console.log(res);
						this.location_longitude = res.longitude
						this.location_latitude = res.latitude
					}
				});
			},

			addbtn() {
				uni.navigateTo({
					url: "add-field"
				})

			},
			uploaddata() {
				let that = this
				if (this.isedit) {
					signEdit({
						data: {
							code: this.code,
							type: this.type,
							name: this.title,
							content: this.message,
							start_at: this.startDate,
							end_at: this.endDate,
							wechat_status: this.isofficialNum ? 1 : 0,
							token_status: this.isword ? 1 : 0,
							token: this.wordtoken,
							location_status: this.isaddress ? 1 : 0,
							location_address: this.addressInfo,
							location_longitude: this.location_longitude,
							location_latitude: this.location_latitude,
							location_min_distance: this.addressrange,
							from_data_status: 1,
							from_data: JSON.stringify(this.from_data),
							sign_time_status: this.isBetweenDate ? 1 : 0,
							sign_time: JSON.stringify(this.sign_time),
						},
					}).then(res => {
						if (res.code == 1) {
							console.log(res.data);
							uni.showToast({
								title: '修改成功',
								duration: 2000,
							});
							setTimeout(() => {
								// 此处是B页面
								uni.navigateBack();
								return
							}, 1000)
						} else if (res.code == 0) {
							uni.showToast({
								title: res.info,
								icon: "none",
								duration: 2000,
							});
						}
					})
				} else {
					if (this.isaddress == true) {
						if (this.location_latitude == "" || this.location_longitude == "") {
							uni.getLocation({
								type: 'gcj02',
								success: res => {
									console.log('当前位置的经度：' + res.longitude);
									console.log('当前位置的纬度：' + res.latitude);
									this.location_longitude = res.longitude
									this.location_latitude = res.latitude
								}
							});
						}
						uni.showLoading({
							title: '正在创建···'
						})
						this.lsNumber = false

						signEdit({
							data: {
								type: this.type,
								name: this.title,
								content: this.message,
								start_at: this.startDate,
								end_at: this.endDate,
								wechat_status: this.isofficialNum ? 1 : 0,
								token_status: this.isword ? 1 : 0,
								token: this.wordtoken,
								location_status: this.isaddress ? 1 : 0,
								location_address: this.addressInfo,
								location_longitude: this.location_longitude,
								location_latitude: this.location_latitude,
								location_min_distance: this.addressrange,
								from_data_status: 1,
								from_data: JSON.stringify(this.from_data),
								sign_time_status: this.isBetweenDate ? 1 : 0,
								sign_time: JSON.stringify(this.sign_time),
							},
						}).then(res => {
							if (res.code == 1) {
								uni.hideLoading()
								uni.showToast({
									title: '创建成功',
									duration: 2000,
								});


								setTimeout(() => {
									console.log(res.data.code, 'resssssssssss');
									uni.redirectTo({
										url: "/pages/signIn/detail?code=" + res.data
											.code
									})
									// this.lsNumber = true
									return
								}, 1000)

							} else if (res.code == 0) {
								uni.showToast({
									title: res.info,
									icon: "none",
									duration: 2000,
								});
							}
						})
					}
					if (this.isaddress == false) {
						uni.showLoading({
							title: '正在创建···'
						})
						this.lsNumber = false
						signEdit({
							data: {
								type: this.type,
								name: this.title,
								content: this.message,
								start_at: this.startDate,
								end_at: this.endDate,
								wechat_status: this.isofficialNum ? 1 : 0,
								token_status: this.isword ? 1 : 0,
								token: this.wordtoken,
								location_status: this.isaddress ? 1 : 0,
								location_address: this.addressInfo,
								location_longitude: this.location_longitude,
								location_latitude: this.location_latitude,
								location_min_distance: this.addressrange,
								from_data_status: 1,
								from_data: JSON.stringify(this.from_data),
								sign_time_status: this.isBetweenDate ? 1 : 0,
								sign_time: JSON.stringify(this.sign_time),
							},
						}).then(res => {
							if (res.code == 1) {
								uni.hideLoading()
								uni.showToast({
									title: '创建成功',
									duration: 2000,
								});

								setTimeout(() => {
									console.log(res.data.code, 'resssssssssss');
									uni.redirectTo({
										url: "/pages/signIn/detail?code=" + res.data
											.code
									})
									// this.lsNumber = true
									return
								}, 1000)

							} else if (res.code == 0) {
								uni.showToast({
									title: res.info,
									icon: "none",
									duration: 2000,
								});
							}
						})
					}
				}

			},

			addbtn11() {
				this.btnText.splice(this.btnStylels, 1)
			},
			createData() {
				// 如果打开了签到地点但是没有设置低点位置的话
				if (this.isaddress == true && this.addressInfo == "") {
					uni.showToast({
						title: '未指定签到地点',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.title == "") {
					// this.$refs.biaoti.open()
					uni.showToast({
						title: '请输入标题',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.message == "") {
					uni.showToast({
						title: '请输入说明',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.isofficialNum == false) {
					this.isofficialNum = 0
				}
				if (this.isform == true) {
					// this.isMust()
					this.rubbish()
				}
				if (this.from_data.length == 0) {
					this.from_data.push(this.btnText[0])
				}
				console.log(this.code, 'this.code的值为这个数');


				// starttime: ['00:00', '00:00'], //开始时间区间块 的存储
				// endtime: ['23:59', '23:59'], //结束时间区间块 的存储
				// [{"sign_time":"00:00:00 - 11:59:59"},{"sign_time":"12:00:00 - 23:59:59"}],
				// 如果没有勾选的话 清空默认的 时间 和随机 口令的值
				if (this.isBetweenDate == false) {
					this.sign_time = []
					uni.setStorage({
						key: 'BtnTextKey',
						data: this.from_data,
						success: function() {
							console.log('本地存储success');
						}
					});
					this.uploaddata()
				} else {
					this.sign_time = []
					for (var i = 0; i < this.starttime.length; i++) {
						this.sign_time.push({
							sign_time: this.starttime[i] + ':00 - ' + this.endtime[i] + ':59'
						})
					}
					console.log(this.sign_time, 'this.sign_time的数据到底是多少');
					// 设置区间限制
					if (this.timecount == 0) {
						uni.showToast({
							title: '区间至少有一个',
							duration: 2000,
							icon: "error"
						});
						return
					}
					if (this.timecount > 1) {
						for (var i = 0; i < this.starttime.length - 1; i++) {
							if (this.starttime[i] <= this.endtime[i] && this.endtime[i] <= this.starttime[i +
									1]) {
								this.uploaddata()
							} else {
								uni.showToast({
									title: '时间区间错误',
									duration: 2000,
									icon: "error"
								});
								return
							}
						}
					} else {
						this.uploaddata()
					}
				}
			}
		},
	}
</script>
<style lang="scss">
	textarea {
		height: 250upx !important;
		min-height: 250upx !important;
	}

	.container {
		background-color: #f6f6f6;
		min-height: 100vh;

		.bordertop {
			border-top: 1px solid #eee;
		}

		.bgcfff {
			background-color: #FFFFFF;
		}

		.item {
			padding: 0 20upx;
			background-color: #fff;
			line-height: 70upx;
			font-size: 28upx;

		}

		.uni-number-box-size {
			height: 32upx;

		}

		.button-box {
			min-height: 74upx;
			display: flex;
			flex-wrap: wrap;
		}

		.button-add {
			background-color: #1e90ff;
			color: #fff;
			padding: 13upx 20upx;
			line-height: 1;
			width: fit-content;
			margin-right: 15upx;
			margin: 15upx;
			margin-left: 0;
			border-radius: 5upx;
		}

		.button-info {
			border-radius: 5upx;
			border: 2upx solid #000;
			padding: 13upx 20upx;
			line-height: 1;
			width: fit-content;
			margin-right: 15upx;
			margin: 15upx;
			margin-left: 0;

			.cover {
				position: absolute;
				right: -2upx;
				top: -2upx;
				width: 24upx;
				height: 24upx;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.button-optional {
			border: 1px solid #1e90ff;
		}

		.button-must {
			border: 1px solid #ff0000;
		}

		.betweentime {
			border-top: 1px solid #eee;

			.left {
				display: flex;
				align-items: center;

				.box {
					margin-right: 30upx;
					width: 30upx;
					height: 30upx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.right {
				width: 100%;
			}
		}

		.bottom-box {
			// background-color: #fff;
			padding-top: 50upx;
			height: 100%;
			margin-top: 20upx;

			.bottom-btn {
				background-color: #1e90ff;
				width: 700upx;
				height: 80upx;
				border-radius: 8upx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				margin-bottom: 40upx;
			}
		}

		.btn-float-box {
			position: fixed;
			bottom: 0;
			z-index: 669;
			width: 100%;
			border-radius: 25upx 25upx 0 0;
			overflow: hidden;
			background-color: #f6f6f6;

			.item {
				background-color: #fff;
				height: 100upx;
				line-height: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.popup-content {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 50px;
			background-color: #fff;
		}

	}
</style>
